<template>
  <div class="home">
    <!-- 标题 -->
    <mt-header fixed title="首页"></mt-header>
    <!-- 轮播图 -->
    <mt-swipe :auto="4000" class="imgBox">
      <mt-swipe-item v-for="(item,index) in imgBoxList" :key="index">
        <img :src="url+item.img" alt />
      </mt-swipe-item>   
    </mt-swipe>
    <!-- 分类按钮 -->
    <div class="btnBox">
      <div v-for="(item,index) in btnBoxList" :key="index">
        <img :src="url+item.img" alt="">
        <div>{{item.title}}</div>
      </div>      
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data(){
    return{
      imgBoxList:[],
      btnBoxList:[]
    }
  },
  created(){
    let that=this;
    // 请求轮播图片
    that.axios.get(that.url+"/lb/all.php").then((res)=>{
      // console.log(res);
      that.imgBoxList=res.data;
    })

   // 请求九宫格图片
   that.axios.get(that.url+"/ly/tAll.php").then((res)=>{
     console.log(res);
     that.btnBoxList=res.data;
     
   })
  }
};
</script>
<style  scoped>
.imgBox{
  margin-top:40px;
  background-color: bisque;
  width:100vw;
  height: 188px;
}
.imgBox img{
  width: 100vw;
  height: 100%;
}
.btnBox{
  display: flex;
  padding: 15px;
}
.btnBox>div{
  flex: 1;
  padding-left: 20px;
}
.btnBox>div>img{
  width:60%;
  border-radius: 50%;
}
</style>
